<template>
  <div class="work-environment">
    <div class="item">
      <TitleHeader name="专业能力要求" />
      <div class="chart-wrapper">
        <RadarChart layerId="76" :chartData="chartDataMajor" />
      </div>
      <div class="desc">{{ summary1 }}</div>
    </div>
    <div class="item">
      <TitleHeader name="通用素质要求" />
      <div class="chart-wrapper">
        <RadarChart layerId="78" :chartData="chartDataCommand" />
      </div>
      <div class="desc">{{ summary2 }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getLayerIds } from '@/api/position';
import TitleHeader from './TitleHeader.vue';
import RadarChart from './RadarChart.vue';

const props = defineProps({
  positionId: {
    type: String,
    default: '',
  },
});

const chartDataMajor = ref({
  chartNameData: [],
  chartValueData: [],
});
const chartDataCommand = ref({
  chartNameData: [],
  chartValueData: [],
});
const summary1 = ref('');
const summary2 = ref('');

const getLayerIdsFn = async () => {
  const params = {
    positionId: props.positionId,
    questionIds: '101,102',
  };
  const res = await getLayerIds(params);
  if (res.code === 200) {
    summary1.value = res.data[101][res.data[101].length - 1].layerValue;
    summary2.value = res.data[102][res.data[101].length - 1].layerValue;
    const temp1 = res.data[101].slice(0, 5);
    chartDataMajor.value.chartNameData = temp1.map((item) => {
      return {
        description: item.description,
        max: 5,
        value: item.layerValue,
      };
    });
    chartDataMajor.value.chartValueData = temp1.map((item) => {
      return item.layerValue;
    });
    const temp2 = res.data[102].slice(0, 5);
    chartDataCommand.value.chartNameData = temp2.map((item) => {
      return {
        description: item.description,
        max: 5,
        value: item.layerValue,
      };
    });
    chartDataCommand.value.chartValueData = temp1.map((item) => {
      return item.layerValue;
    });
  }
};

onMounted(() => {
  getLayerIdsFn();
});
</script>

<style scoped lang="scss">
.work-environment {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  gap: 72px;
  .item {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    border-radius: 32px;
    .chart-wrapper {
      width: 100%;
      height: calc(100% - 250px);
    }
    .desc {
      font-size: 23px;
      line-height: 1.6;
      color: #555;
    }
  }
}
</style>
